<template>
  <div style="width: 100%;height: 100%;margin: 0;padding: 0">
    <div class="pane_name">
      <span>数据查询</span>
      <button class="pane_close" @click="close"></button>
    </div>
    <div class="pane_content">
      <div class="search_pane_input">
        <input type="text" placeholder="根据分类查询内容" /><button class="search_btn"></button>
      </div>
      <div class="search_pane_array">
        <div class="array_title">分类</div>
        <div class="arr_item">
          三维空间查询
        </div>
        <div class="arr_item">
          三维临近查询
        </div>
        <div class="arr_item">
          全文属性查询
        </div>
        <div class="arr_item">
          混合条件查询
        </div>
        <div class="arr_item">
          空间查询
        </div>
        <div class="arr_item">
          属性查询
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "search-choice-pane",
    methods:{
      close:function(){
        this.$emit('closePane',false);
      }
    }
  }
</script>

<style scoped>
  .pane_name {
    border:1px #38535e solid;
    border-radius:2px;
    height:30px;
    line-height:30px;
    color:#ffffff;
    font-size:14px;
    text-indent:10px;
  }
  .pane_close {
    float:right;
    margin:9px;
    width:10px;
    height:10px;
    background:url(../../../static/IMG/leftsider/取消.png) center no-repeat;
    border:none;
    cursor:pointer;
    outline: none;
  }
  .pane_item {
    height:40px;
    line-height:40px;
    text-indent:10px;
  }
  .pane_item_name {
    font-size:14px;
    color:#ffffff;
  }
  .search_pane_input {
    padding:10px 10px 0 10px;
  }
  .search_pane_input input {
    width:185px;
    height:28px;
    border:0;
    background-color:rgba(89,101,107,.9);
    text-indent:10px;
    line-height:28px;
    outline:none;
    color:#ffffff;
  }
  .search_pane_input .search_btn {
    position:absolute;
    width:45px;
    height: 30px;
    border:0;
    padding:8px;
    color:#ffffff;
    background:url(../../../static/IMG/搜索.png) center no-repeat;
    background-color:#2891bc;
  }
  .search_pane_array {
    width:230px;
    padding:10px;
    color:#ffffff;
  }
  .array_title {
    height:30px;
    line-height:30px;
    font-size:14px;
    cursor:default;
  }
  .arr_item {
    width:50%;
    height:35px;
    text-align:center;
    line-height:35px;
    font-size:14px;
    float:left;
    cursor:pointer;
  }
</style>
